<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            font: 18px "Microsoft YaHei UI";
            margin: 0;
            background-color: white;
        }

        header a {
            text-decoration: none;
            color: #FFFFFF;
        }

        header a:hover {
            color: #0aa1ed;
        }

        /*去掉自带的内边距*/
        .el-table .el-table__cell {
            padding: 0;
            color: #FF6537;
            font: 20px "Microsoft YaHei UI";
        }

        .p_img:hover {
            position: relative;
            bottom: 5px;
            /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }

        div li a {
            color: #FFFFFF;
            font: 16px "Microsoft YaHei UI";
        }

        div li a:hover {
            color: #0aa1ed;
        }

        .el-card__body, .el-main {
            padding: 0
        }
    </style>
</head>
<body>
<div id="app">
    <!--页头组件-->
    <el-page-header style="background-color: #FF6537;color: white;line-height: 60px"
                    @back="goBack" content="售后页面"></el-page-header>
    <!--分割线-->
    <el-divider></el-divider>
    <div style="display: flex;justify-content: center; background-color: #FFFFFF;">
        <div style="float: left">
            <img src="imgs/logo1.jpg"
                 style="width: 150px;vertical-align: middle" alt="">
            <!--搜索框开始-->
            <el-input style="width: 580px;border: 1px solid #FF6537;" v-model="input"
                      placeholder="请输入内容"></el-input>
            <el-button type="搜索" round style="background-color: #FF6537;color: #FFFFFF">搜索</el-button>
            <!--搜索框结束-->
        </div>
    </div>
    <el-main style="width: 803px;margin: 0 auto;padding: 0px;margin-top: 20px;">
        <div style="width: 800px;height: 30px;background-color:#FF6537;border: 1px solid white;text-align: center">
            <div style="float: left">
                <template>
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked" style="float: left;margin-top: 7px;color: white;margin-left: 10px">
                        全选
                    </el-checkbox>
                </template>
            </div>
            <div style="float: left;font-size: 14px;margin-left: 123px;margin-top: 8px;color: white">商品</div>
            <div style="float: left;font-size: 14px;margin-left: 193px;margin-top: 8px;color: white">单价</div>
            <div style="float: left;font-size: 14px;margin-left: 63px;margin-top: 8px;color: white">数量</div>
            <div style="float: left;font-size: 14px;margin-left: 83px;margin-top: 8px;color: white">小计</div>
            <div style="float: right;font-size: 14px;margin-top: 8px;margin-right: 26px;color: white">操作</div>
        </div>
        <div>
            <div style="float: left;margin-left: 10px">
                <template>
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked"
                                 style="float: left;width: 13px;margin: 7px 3px 0px 0px;color: black"></el-checkbox>
                </template>
            </div>
            <div style="float: left;font-size: 14px;margin-top: 8px">好物推荐</div>
        </div>
        <el-divider></el-divider>
        <!--商品列表开始-->
        <el-row>
            <el-col v-for="p in productArr" style="width: 803px;padding: 0px;margin: -20px 0px 40px 0px">
                <el-card style=";padding: 0px;height: 150px">
                    <!--小方块-->
                    <div>
                        <div style="float: left;margin-left: 9px">
                            <template>
                                <!-- `checked` 为 true 或 false -->
                                <el-checkbox v-model="checked"
                                             style="float: left;width: 13px;margin: 7px 3px 0px 0px;color: black"></el-checkbox>
                            </template>
                        </div>
                    </div>
                    <!--小方块-->
                    <div>
                        <div style="float: left;margin-top: 30px">
                            <img class="p_img" :src="p.url" width=80px alt="">
                        </div>
                        <div style="float: left;width: 250px;margin-top: 60px;padding: 0px;">
                            <p style="font-size: 15px;margin-top: 0;height: 38px">{{p.title}}</p>
                        </div>
                        <div style="color: #6c6c6c;width: 50px;height: 30px;float: left;margin: 65px 0px 0px 45px">
                            ￥{{p.price}}
                        </div>
                        <div style="float: left">
                            <!--计数器-->
                            <template>
                                <el-input-number v-model="num" @change="handleChange" :min="1"
                                                 :max="99" label="描述文字" size="mini" style="margin: 60px 0px 0px 10px">
                                </el-input-number>
                            </template>
                            <!--计数器-->
                        </div>
                        <div style="color: #6c6c6c;width: 50px;height: 30px;float: left;margin: 65px 0px 0px 25px">
                            ￥{{这是件数合计}}
                        </div>
                    </div>
                    <div style="color: #6c6c6c;width: 50px;height: 30px;float: left;margin: 65px 0px 0px 80px">
                        <a href="exchangeAPurchase.html">售后</a>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--商品列表结束-->
        <div style="width: 800px;height: 30px;background-color: #FF6537;border: 1px solid white;text-align: center">

        </div>

    </el-main>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        const: cityOptions = [],
        data: function () {
            return {
                checkAll: false,
                checkedCities: [],
                cities: cityOptions,
                isIndeterminate: true,
                productArr:[{title:"疯狂的小狗狗粮1-6月幼犬专用泰迪柯基金毛拉布拉多奶糕通用型20",price:233,oldPrice:598,url:"imgs/11.jpg",saleCount:2342}],
                num: 1
            }
        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            handleChange(value) {
                console.log(value);
            },
            del(i){
                alert(0)
                this.productDelete(v.productArr[i].title="小可啊")
            },
            goBack(){
                //返回上一页面
                history.back();
            }
        }
    })
</script>
</html>